<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:include="include :: header('OKR信息列表')" />
</head>
<body>
<div class="container-div">
    <div class="row" >
        <div class="col-sm-12 search-collapse collapse">
            <form id="okr_search_form">
                <div class="select-list hidden">
                    <ul class="row">
                        <li class="col-xs-12 col-sm-6 col-md-4 hidden">
                            <label>周期ID：</label>
                            <input type="text" name="cycleId"   id="cycleId"/>
                        </li>
                        <li class="col-xs-12 col-sm-6 col-md-4">
                            <label>优先级：</label>
                            <input type="text" name="priority"/>
                        </li>
                        <li class="col-xs-12 col-sm-6 col-md-4">
                            <a class="btn btn-primary btn-rounded btn-sm"
                               onclick="$.treeTable.search('okr_search_form')">
                                <i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()">
                                <i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-info" id="expandAllBtn">
                <i class="fa fa-exchange"></i> [[#{okr.openOrClose}]]
            </a>
            <div class="btn-group">
                <select class="form-control" data-style="btn-success"  id="cycleIdSelect"  th:onchange="changeCycleType()">
                    <optgroup th:label="#{okr.yearChoice}">
                        <div th:each="cycle : ${cycleList}">
                            <div th:if="${cycle.cycleType == 1}">
                                <span th:if="${cycle.status == 0}">
                                        <option th:value="${cycle.id}" th:text="${cycle.cycleName}"></option>
                                </span>
                                <span th:if="${cycle.status == 1}">
                                        <option th:value="${cycle.id}" th:text="${cycle.cycleName}"></option>
                                </span>
                            </div>
                        </div>
                    </optgroup>
                    <optgroup th:label="#{okr.quarterChoice}">
                        <div th:each="cycle : ${cycleList}">
                            <div th:if="${cycle.cycleType == 0}">
                                <span th:if="${cycle.status == 0}">
                                        <option th:value="${cycle.id}" selected="selected" th:text="${cycle.cycleName}"></option>
                                </span>
                                <span th:if="${cycle.status == 1}">
                                        <option th:value="${cycle.id}" th:text="${cycle.cycleName}"></option>
                                </span>
                            </div>
                        </div>
                    </optgroup>
                </select>
            </div>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-tree-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">

    var okrIds = [[${okrIds}]]
    console.log(okrIds)
    $(function () {
        var prefix = ctx + "okr/info";
        var options = {
            code: "rowId",
            parentCode: "parentId",
            uniqueId: "id",
            showSearch:false,
            expandAll: true,
            expandFirst: false,
            url: prefix + "/list",
            ajaxParams:{"cycleId":$("#cycleIdSelect").val()},
            queryParams: queryParams,
            modalName: [[#{okr.info}]],
            rememberSelected: true,
            columns: [
                {
                    field: 'selectItem',
                    checkbox: true,
                },
                {
                    field: 'content',
                    title: [[#{okr.content}]],
                    classes: 'col-md-10 col-sm-10',
                }]
        };
        $.treeTable.init(options);
        function queryParams(params) {
            var search = $.table.queryParams(params);
            search.userName = $("#userName").val();alert(1);
            return search;
        }
    });

    // function getOkrIds(dataArr) {
    //     var str = "";
    //     for (var i = 0; i < dataArr.length; i++) {
    //         str += dataArr[i].id+ ",";
    //     }
    //     //去掉最后一个逗号(如果不需要去掉，就不用写)
    //     if (str.length > 0) {
    //         str = str.substr(0, str.length - 1);
    //     }
    //     return str;
    // }

    function changeCycleType(type) {
        var cycleId = $("#cycleIdSelect").val();
        $("#cycleId").val(cycleId);
        $.treeTable.search();
    }

    function submitHandler(){
        var selectRows = $.treeTable.selectRowData();

        if (selectRows.length > 0){
            var okrIds = new Array()
            for (var i = 0; i < selectRows.length; i++) {
                okrIds.push(selectRows[i].rowId)
            }
            $.ajax({
                url:ctx + "system/task/selectOkr",
                data: {'okrs' : okrIds},
                type: 'POST'
            })
        }
        $.modal.close();
    }


</script>
</body>
</html>